@charset"UTF-8";
$fontSize:40;   
@function r($p) {
    @return $p/$fontSize*1rem;
}
*{
    font-size: 0;
}
html,body{
    height: 100%;
    width: 100%;
} 
html{
    font-size: 40px;
}
.web{
    width: 100%;
    >.content{
        >.first{    
        width: 100%;
            >img{
                width: 100%;
            }
        }
        >.second{
            padding: 0;
            margin: 0;
            padding-top: r(93);
            padding-bottom: r(67);
            >.row{
                padding: 0;
                margin: 0;
                width: 85%;
                margin: 0 auto;
                >.col-sm-8{
                    margin: 0;
                    padding: 0;
                    padding-right: r(31);
                    >div{
                        font-size: 36px;
                        color: #2a2a2a;
                        font-weight: normal;
                        margin-bottom: r(35);
                    }
                    >p:first-of-type{
                        font-size: 21px;
                        color: #2a2a2a;
                        margin-bottom: r(31);
                    }
                    >p:nth-of-type(2){
                        font-size: 14px;
                        color: #2a2a2a;
                        margin-bottom: r(26);
                    }
                     >p:nth-of-type(3){
                        font-size: 14px;
                        color: #2a2a2a;
                    }
                }
                >.col-sm-4{
                    margin: 0;
                    padding: 0;
                    padding-top: r(120);
                    >img{
                        width: 100%;
                    }
                }
            }
        }
        >.third{
            padding: 0;
            margin: 0;
            padding-top: r(115);
            padding-bottom: r(82);
            background-color: #8cc11f;
            >.row{
                padding: 0;
                margin: 0;
                width: 85%;
                margin: 0 auto;
                >.col-sm-8{
                    margin: 0;
                    padding: 0;
                    padding-right: r(31);
                    >div{
                        font-size: 36px;
                        color: #ffffff;
                        margin-bottom: r(59);
                    }
                    >p:first-of-type{
                        font-size: 16px;
                        color: #ffffff;
                        margin-bottom: r(24);
                    }
                    >p:nth-of-type(2){
                        font-size: 16px;
                        color: #ffffff;
                    }
                }
                >.col-sm-4{
                    margin: 0;
                    padding: 0;
                    padding-top: r(80);
                    >p:first-of-type{
                        font-size: 16px;
                        color: white;
                        margin-bottom: r(18);
                    }
                    >span{
                        display: inline-block;
                        color: #8cc11f;
                        background-color: #ffffff;
                        border-radius: 4px;
                        padding: 14px;
                        font-size: 24px;
                        margin-bottom: r(16);
                    }
                    >p:last-of-type{
                        font-size: 16px;
                        color: white;
                    }
                }
            }
        }
       >.fourth{
           width: 85%;
           margin: 0 auto;
           >.one{
               padding-top: r(72);
               padding-bottom: r(50);
               border-bottom: 1px solid #d2d2d2;
               >p:first-of-type{
                   font-size: 26px;
                   color: #8cc11f;
                   margin-bottom: r(40);
               }
               >p:nth-of-type(2),>p:nth-of-type(3){
                   font-size: 18px;
                   color: #2a2a2a;
               }
               >ul{
                   padding-left: 22px;
                   margin-bottom: r(17);
                   >li{
                       font-size: 14px;
                       margin-bottom: r(21);
                   }
                   >li:last-of-type{
                       margin: 0;
                   }
               }
           }
           >.one:first-of-type{
               padding-top: r(122);
           }
       }
       >.fifth{
           padding-top: r(43);
           padding-bottom: r(43);
           background-color: #f4f4f4;
           >div{
               width: 85%;
               margin: 0 auto;
               >p{
                   color: #2a2a2a;
                   font-size: 36px;
                   margin-bottom: r(39);
               }
               >ul{
                   display: flex;
                   flex-wrap: wrap;
                   justify-content: space-between;
                   >li{
                       width: 47%;
                       margin-bottom: r(20);
                       padding: 16px;
                       background-color: #ffffff;
                       border-radius: 4px;
                       border: solid 1px #e3e3e3;
                       display: flex;
                       align-items: center;
                       >img{
                           display: inline-block;
                           width: 70px;
                           margin-right: 10px;
                       }
                       >div{
                           display: inline-block;
                           color: #2a2a2a;
                           font-size: 16px;
                       }
                   }
               }
           }
       }
    }
    
}
@media(max-width:768px){
    .web{
        >.content{
            >.second{
                >.row{
                    width: 92% !important;
                }
            }
            >.third{
                >.row{
                    width: 92% !important;
                }
            }
            >.fourth{
                width: 92% !important;
            }
            >.fifth{
                >div{
                    width: 92% !important;
                    >ul{
                        >li{
                            width: 100% !important;
                        }
                    }
                }
            }
        }
    }
}
